import { useDeviceInfo } from "@/store/deviceContext";
import { useLayoutEffect, useState } from "react";

export const usePageDimensions = () => {
  const [heightExclNavbar, setHeightExclNavbar] = useState(0);
  const [heightExclNavWithTabbar, setHeightExclNavWithTabbar] = useState(0);

  const { deviceInfoState, navBarBottom } = useDeviceInfo();

  const { screenWidth } = deviceInfoState;

  useLayoutEffect(() => {
    const { windowHeight, screenHeight } = deviceInfoState;
    const exclNavbar = windowHeight - navBarBottom;
    setHeightExclNavbar(exclNavbar);
    const tabBarHeight = screenHeight - windowHeight;
    setHeightExclNavWithTabbar(exclNavbar + tabBarHeight);
  }, [navBarBottom, deviceInfoState]);

  return { heightExclNavbar, heightExclNavWithTabbar, screenWidth };
};
